<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.STORE.NUM' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="storeNum" name="storeNum" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('storeNum'), name:'storeNum'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.STORE.NAME' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="storeName" name="storeName" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('storeName'), name:'storeName'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.STORE.NAME_EN' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="storeNameEN" name="storeNameEN" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('storeNameEN'), name:'storeNameEN'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.TRANSACTION_CURRENCY' | i18n}}</nz-form-label>
          <nz-form-control>
            <app-currency-select
              [insCode]="store.store.common.insCode"
              formControlName="currencies"
              (ngModelChange)="onCurrenciesChange($event)"
              [multiple]="isCurrencyMultiple"></app-currency-select>
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('currencies'), name:'currencies'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>MCC</nz-form-label>
          <nz-form-control>
            <app-mcc-select
              formControlName="mcc"
              (ngModelChange)="onMCCChange($event)"
              [mccType]="'standard'"></app-mcc-select>
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('mcc'), name:'mcc'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.CONTACT_NAME' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="contactName" name="contactName" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('contactName'), name:'contactName'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.EMAIL' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="contactEmail" name="contactEmail" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('contactEmail'), name:'contactEmail'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.COUNTRY_REGION' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <app-country-select
              formControlName="country"
              (ngModelChange)="onCountryChange($event)"></app-country-select>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('country'), name:'country'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.CITY' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="city" name="city" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('city'), name:'city'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.POSTAL_CODE' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="zipCode" name="zipCode" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('zipCode'), name:'zipCode'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.ADDRESS' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="detailAddress" name="detailAddress" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('detailAddress'), name:'detailAddress'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ errorTips[name]?.minlength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('pattern'); else fifth">{{ errorTips[name]?.pattern }}</ng-container>
    </ng-template>
    <ng-template #fifth>
      <ng-container *ngIf="control.hasError('isNumTaken')">{{ errorTips[name]?.isNumTaken }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>
